<template>
	<div class="page">
		<!-- 展示列表模块 -->
		<div class="headerTop">
			摄像头名称:
			<el-input type="text" v-model="search_commodity" class="inpu" placeholder="输入设备名称"></el-input>
			<el-button type="primary" size="small" @click="searchGoods">查询</el-button>
		</div>
		<div class="header_bottom">
			<el-button type="success" size="small" @click="add">添加摄像头</el-button>
			<el-button type="primary" size="small" @click="showAll" v-if="all">刷新全部</el-button>
			<!--<el-button type="danger" size="small"  @click="deleteGoods">删除</el-button>-->
		</div>
		<div class="container_table">
			<el-table :data="tabledata" size="mini" border style="width: 99.4%;" 
			 :header-cell-style="{
				'background-color':tableHead,
				'color': 'white',
                'fontSize':'0.3rem',
				'height':'0.6rem',
				'line-height':'0.6rem',
				'padding':'0.1rem'
			}" :cell-style="{'fontSize':'0.3rem'}">
				<!-- <el-table-column type="selection" min-width="30" fixed header-cell-style="color:red;background-color:blue;"> -->
				<!-- </el-table-column> -->
				<el-table-column label="ID" prop="id" align="center" min-width="50" fixed>
				</el-table-column>
			    <el-table-column prop="camera_name" label="摄像头名称" align="center" min-width="180">
				</el-table-column>
				<el-table-column prop="product_name" label="所属项目" align="center" min-width="180">
				</el-table-column>
				<el-table-column prop="equip_name" label="关联设备" align="center" min-width="150">
					<template slot-scope="scope">
						<span>{{scope.row.equip_name?scope.row.equip_name:'全部设备'}}</span>
					</template>	
				</el-table-column>
			    <el-table-column prop="add_time" label="添加时间" align="center" min-width="150">
				</el-table-column>
				<el-table-column label="操作" min-width="150" align="center" fixed="right">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="modifyform(scope.row)">编辑</el-button>
						<!-- <el-button type="success" size="small" @click="setIt">配置</el-button> -->
						<el-button @click="sureDelete(scope.row)" type="danger" size="mini">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination @size-change="handleSizeChange" @current-change="current_change" :current-page="queryParams.pageNo"
				 :page-size="queryParams.pageSize" :page-sizes="[10,15,20]" layout="total, sizes, prev, pager, next, jumper" :total="queryParams.total">
				</el-pagination>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'camera',
		data() {
			return {
				tableHead:localStorage.getItem("bgcolor"),
				all: false,
				value: '',
				id: 0,
				//baseurl: 'http://api.tengdalixi.net/',
				readonly: false,
				search_commodity: '', //输入框内容
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					total: 0
				},
				tabledata: [],
				formLabelWidth2: '80px',
				formLabelWidth: '100px',
				setForm: {
					name: '无'
				}

			}
		},

		created() {
			this.queryParams.pageNo=Number(localStorage.getItem("currentCameraNo")) || 1;
			this.showList(this.queryParams.pageNo, this.queryParams.pageSize);
        },
        methods: {
			current_change: function(currentPage) {
			    this.queryParams.pageNo =currentPage;
				this.showList(currentPage, this.queryParams.pageSize,this.search_commodity);
				//console.log(currentPage)
			},
			handleSizeChange(val) {
				this.queryParams.pageSize = val;
				this.showList(this.queryParams.pageNo, val,this.search_commodity);
			},

			update() {
				this.showBtn = false;
				console.log("update")
			},

			//获取数据函数
			showList: function(num, size, keyword) {
				var that = this;
				this.$http({
						method: 'post',
						url: 'api/camera/lists',
						data: {
							'limit': size,
							'page': num,
							'keyword': keyword
						}
					})
					.then(res => {
						if (res && res.data.result == "success") {
							//console.log(res.data.data);
							that.tabledata = res.data.data;
							//this.queryParams.pageNo = 1;
							//this.queryParams.pageSize=10;
							this.queryParams.total = res.data.count;
					    }
					}).catch(error => {
						console.log(error)
						this.tabledata = [];
						this.queryParams.total = 0;
						this.queryParams.pageNo = 1;
					});
			},
			// 点击搜索输入框里的内容
			searchGoods() {
				this.all = true;
				this.queryParams.pageNo=1;
				this.showList(1, this.queryParams.pageSize, this.search_commodity);
			},
			showAll() {
				this.all = false;
				this.queryParams.pageNo=1;
				this.search_commodity = '';
				this.showList(1, this.queryParams.pageSize);
			},
			add() {
				this.$router.push({
					name: 'addCamera',
					path: 'addCamera',
					component: 'addCamera'
				})

			},
			modifyform(row) {
				this.$router.push({
					name: 'editCamera',
					path: 'editCamera'
				})
				localStorage.setItem("currentCameraNo",this.queryParams.pageNo);
				localStorage.setItem('editCameraId', row.id);
			},
            
			sureDelete(row) {
				this.$confirm('删除后无法恢复,是否确认删除该摄像头?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.handleClick(row);
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			handleClick(row) {
				var that = this;
				this.$http({
					method: 'post',
					url: 'api/camera/delete',
					data: {
						"id": row.id
						}
				}).then(res => { //
					//console.log(res.data.data)
					if (res && res.data.result == "success") {
						this.$message({
							message: '恭喜,删除摄像头成功!',
							type: 'success',
							center: true
						});
						
					this.showList(this.queryParams.pageNo, this.queryParams.pageSize)
					}
				}).catch(error => {
					console.log(error)
				});
				//console.log(tab, event);
			}
		}
	}
</script>

<style scoped>
	.inpu,
	.sele {
		margin-right: 0.4rem;
	}

	.inpu {
		width:5rem;
		font-size: 16px;
	}
</style>
